<!--培训任务学习-->
<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import IndexSmallTitle from "../components/common/IndexSmallTitle.vue";
import {Search} from '@element-plus/icons-vue'
import {useRoute,useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();

const listHeadButtnGroup = reactive([
  {label: '全部', selected: true},
  {label: '车站值班员（高铁）', selected: false},
  {label: '值班站长（车站值班员）', selected: false},
  {label: '扳道员', selected: false},
  {label: '车站调度员', selected: false},
  {label: '车号员', selected: false},
  {label: '列尾作业员', selected: false},
  {label: '助理值班员（内勤）', selected: false},
  {label: '助理值班员（外勤）', selected: false},
  {label: '调车区长', selected: false},
  {label: '助理调度员', selected: false},
  {label: '调车长', selected: false},
  {label: '连接员', selected: false},
  {label: '减速顶维修工', selected: false},
  {label: '调车指导', selected: false},
  {label: '驼峰值班员', selected: false},
  {label: '驼峰作业员', selected: false},
]);

///获取Label字符串

const options = [
  {
    value: 'Option1',
    label: '全部类型',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];

const tableData = [
  {
    id: '1',
    scene: '应急场景',
    name: '车辆塞门处置相关要求培训课件',
    state: '在线学习',
    type: 0,
    duration:'11:20:20',
    url: 'https://www.hks-power.com.cn/uploadfiles/2020/09/20200909200802308.pdf',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
  },
  {
    id: '2',
    scene: '应急场景',
    name: '车辆塞门处置相关要求培训课件',
    state: '在线学习',
    type: 0,
    url: 'https://www.hks-power.com.cn/uploadfiles/2020/09/20200909200802308.pdf',
    duration:'01:20:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
  },
  {
    id: '3',
    scene: '应急场景',
    name: '车辆塞门处置相关要求培训课件',
    state: '在线学习',
    type: 0,
    url: 'https://www.hks-power.com.cn/uploadfiles/2020/09/20200909200802308.pdf',
    duration:'20:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
  },
  {
    id: '999',
    scene: '应急场景',
    name: '车辆塞门处置相关要求培训课件',
    state: '在线学习',
    type: 1,
    url: 'http://vjs.zencdn.net/v/oceans.mp4',
    duration:'10:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
  },
  {
    id: '999',
    scene: '应急场景',
    name: '车辆塞门处置相关要求培训课件',
    state: '在线学习',
    type: 1,
    url: 'http://vjs.zencdn.net/v/oceans.mp4',
    duration:'01:10:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
  },
]

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      positionMenuIndex: index,
    },
  });
};
function readUrlParameter() {
  const positionMenuIndex = Array.isArray(route.query.positionMenuIndex)
      ? route.query.positionMenuIndex[0]
      : route.query.positionMenuIndex;
  console.log(positionMenuIndex, 'positionMenuIndex');
  // 解析为整数
  const index = parseInt(positionMenuIndex||'0', 10);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickHeadButtonGroup(index,false);
  } else {
    console.error('Invalid leftMenuIndex:', positionMenuIndex);
  }

}

const input = ref('')

///搜索的关键字
const input1 = ref('')

///是否展示分页
const hideOnSinglePage = ref(false);
///一共展示多少条数据
const pageTotalCount = ref(500);

/// 单击按钮的事件响应
function clickHeadButtonGroup(selectedIndex: number,upRoute:boolean) {
  listHeadButtnGroup.forEach((e,index) => {
    e.selected = false;
    if (index === selectedIndex) {
      e.selected = true;
    }
  },);
  if(upRoute){
    updateRoute(selectedIndex);
  }

  console.log(`valuevaluevalue${value.value}`)
}

onMounted(()=>{
  readUrlParameter();
})

const value = ref('全部类型')

const currentShowPage = ref(1);

function onChangeValue(e: any) {
  console.log(e);
  value.value = e;
  console.log(`valuevaluevalue${value.value}`)
}

function openPdf(pdfUrl:string){
  window.open(pdfUrl, '_blank');
}

///监听变化
watch(currentShowPage, (newValue) => {
  console.log('变化');
  console.log(newValue);
})

</script>

<template>
  <div style="display: flex;flex-direction: row">
    <div style="width: 413px;margin-top: 20px;margin-left: 20px">
      <RouterView/></div>
  <div class="mainStyle">
    <!--头部导航-->
    <div class="headGroupButtonContainerStyle">
      <div v-for="(elment,index) in listHeadButtnGroup" :index="index">
        <div @click="clickHeadButtonGroup(index,true)" class="headButtonStyle"
             :class="{'headButtonSelectedStyle':elment.selected}">
          {{ elment.label }}
        </div>
      </div>
    </div>
    <!--主体部分-->
    <div class="bodyStyle">
      <index-small-title title="课件列表"></index-small-title>

      <div class="bodyInputStyle">
        <el-select @change="onChangeValue(value)" v-model="value" :placeholder="value" style="width: 240px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>

        <div style="display: flex;flex-direction: row;align-items: center;gap: 5px">
          来源
          <el-select @change="onChangeValue(value)" v-model="value" :placeholder="value" style="width: 240px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>

        <div style="display: flex;flex-direction: row;align-items: center;gap: 5px">
          第
          <el-input v-model="input" style="width: 100px" placeholder="请输入"/>
          章
        </div>

        <div style="display: flex;flex-direction: row;align-items: center;gap: 5px">
          第
          <el-input v-model="input" style="width: 100px" placeholder="请输入"/>
          条
        </div>

        <div style="display: flex;flex-direction: row;align-items: center;gap: 5px">
          关键词
          <el-input
              v-model="input1"
              style="width: 270px"
              size="large"
              placeholder="请输入关键词"
              :suffix-icon="Search"
          />
        </div>
      </div>

      <el-table :data="tableData" border style="width: 100%;margin-top: 20px" class="custom-table">
        <el-table-column prop="id" label="序号" width="60" align="center"/>
        <el-table-column prop="scene" label="课件类型" width="300" align="center">
          <template v-slot="scope">
            <div @click="openPdf(scope.row.url)" v-if="scope.row.type==1" style="display: flex;cursor: pointer;justify-content: center; height: 80px;gap: 5px ;align-items: center">
              视频
              <div style="position: relative;display: inline-block;">
                <img style="position:relative;border-radius: 6px;z-index: 0" :src="scope.row.iconUrl"
                     width="110px" height="54px"/>
                <div style="position:absolute;color:white; text-shadow:2px 2px 2px #000000;right: 5px;bottom:5px;z-index: 100">{{scope.row.duration}}</div>
              </div>
            </div>

            <div @click="openPdf(scope.row.url)" v-if="scope.row.type==0" style="display: flex;cursor: pointer;justify-content: center; height: 80px;gap: 5px ;align-items: center">
              PDF
              <div style="position: relative;display: inline-block;">
                <img style="position:relative;z-index: 0" src="../assets/pdf_icon.png"
                     width="50px" height="50px"/>
              </div>
            </div>

            <div v-if="scope.row.type==0">

            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课件名称" align="center"/>
        <el-table-column prop="type" label="状态" align="center" width="200">
          <template v-slot="scope">
            <span class="status-text">{{ scope.row.state }}>></span>
          </template>
        </el-table-column>
      </el-table>
      <div class="example-pagination-block">
        <el-pagination
            :hide-on-single-page="hideOnSinglePage"
            :page-count="pageTotalCount / 10"
            :default-page-size="10"
            v-model:currentPage="currentShowPage"
            layout="prev, pager, next"
        />
      </div>
    </div>
  </div>
  </div>
</template>

<style scoped>
.example-pagination-block {
  display: flex;
  justify-content: end;
}

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;

}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

.custom-table {
  border-radius: 6px;
}

.el-table {
  --el-table-header-bg-color: #EEF8FE;
  --el-table-header-text-color: #000000;
}

.status-text {
  color: #3C8DF9;
  cursor: pointer;
}

.bodyInputStyle {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 20px;
}

.bodyStyle {
  margin-top: 20px;
}

.headButtonStyle {
  background-color: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #3C8DF9;
  padding: 10px 20px;
  cursor: pointer; /*鼠标移动上去是手型*/
}

.headButtonStyle:hover {
  background-color: #A3C9FB;
}

.headButtonSelectedStyle {
  background-color: #3C8DF9;
  color: #FFFFFF;
}


.mainStyle {
  margin: 20px 30px;
  background: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(4, 42, 94, 0.1);
  padding: 20px;
}

.headGroupButtonContainerStyle {
  background: #E0F1FF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(4, 42, 94, 0.1);
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  gap: 20px;
}
</style>